<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet"/>
	<link href="css/ui.jqgrid.css" rel="stylesheet"/>
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/i18n/grid.locale-kr.js"></script>
	<script src="js/jquery.jqGrid.min.js"></script>
 	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  
  	<script type="text/javascript">	
  	var lastsel1;
  	var lastsel2;
  	var lastrow1;
  	var lastrow2;
  	var dataSet1;
  	var dataSet2;
  	var data1;
  	var codetype;
  	var codename;
  	
  	
  	$(document).ready(function(){
  		$('#grid1').jqGrid
  		({
  			pager:'#pager1'
			, loadonce:false
			, datatype:'json'
			, height:'100%'
			, rowNum:10
			, rowList:[10,20,30]
			, colNames:['분류코드','상세코드','분류코드명','정렬순서','sign']
			, colModel:[
			           {name:'codeType', width:300,align:'center' }
			          ,{name:'codeDetail', width:100,align:'center',hidden:true}
			          ,{name:'codeName', width:600,align:'center',editable:true}
			          ,{name:'sortOrder', width:100,align:'center',hidden:true}
			          ,{name:'sign',width:100,align:'center',hidden:true}
			          ]
	 	   	 ,onSelectRow:function(id)
	    	 {
	    		 if(id && id!==lastsel1)
	    		 {
		        	 jQuery("#grid1").saveRow(lastsel1);
		        	 jQuery("#grid2").saveRow(lastsel2);
		        	 
		        	 var row = $("#grid1").getGridParam( "selrow" );
	 				 var data = $("#grid1").getRowData(row);
	 				 
	 				 
	 				 if(data.sign=='R'){
	 					jQuery("#grid1").jqGrid('setColProp','codeType',{editable:false});
	 				 }else{
	 					jQuery("#grid1").jqGrid('setColProp','codeType',{editable:true});
	 				 }
	 				 
	 				 jQuery("#codeType").val(data.codeType);
	 		         jQuery("#codeName").val(data.codeName);
	 		         
	 		         $.ajax({
						url : 'SYS1012M1.do',
						type : 'POST',
						data:'json',
						data :  {'codeType':$('#codeType').val()
							,'codeName':$('#codeName').val()
								},
						success : function(data)
						{
							var rows=data.rows;
							dataSet2=null;
							dataSet2=new Array();
							$('#grid2').jqGrid('clearGridData');
							
							lastrow2=rows.length-1;
							
							if(data.result)
							{
								for(var i=0;i<rows.length;i++)
								{
									jQuery("#grid2").addRowData(i,rows[i]);
									jQuery('#grid2').setRowData(i, {sign:'R'});
										
									dataSet2[i]=rows[i];
								}
							}else
							{
								alert(data.msg);
							}
							 
						}
					});
	        		 jQuery(this).editRow(id,true);
		        	 lastsel1=id;
	 		       	 
    		 	 }
	    		 
	    	 }
		});
	});
	$(document).ready(function(){
  		$('#grid2').jqGrid
  		({
  			pager:'#pager2'
			, loadonce:false
			, datatype:'json'
			, height:'100%'
			, rowNum:10
			, rowList:[10,20,30]
			, colNames:['분류코드','상세코드','상세코드명','정렬순서','sign']
			, colModel:[
			          {name:'codeType', width:100,align:'center',hidden:true}
			          ,{name:'codeDetail', width:300,align:'center'}
			          ,{name:'codeName', width:300,align:'center',editable:true}
			          ,{name:'sortOrder', width:300,align:'center',editable:true}
			          ,{name:'sign',width:100,align:'center',hidden:true}
			          ]
	    	 ,onSelectRow:function(id)
	    	 { 
	    		 if(id && id!==lastsel2)
	    		 {
	    			 jQuery("#grid1").saveRow(lastsel1);
		        	 jQuery("#grid2").saveRow(lastsel2);
		        	 
	    			 var row = $( "#grid2" ).getGridParam( "selrow" );
	 				 var data = $( "#grid2" ).getRowData(row);
	 				 
	 				if(data.sign=='R'){
	 					jQuery("#grid2").jqGrid('setColProp','codeDetail',{editable:false});
	 				 }else{
	 					jQuery("#grid2").jqGrid('setColProp','codeDetail',{editable:true});
	 				 }
	 				 
		        	 jQuery(this).editRow(id,true); 
		        	 lastsel2=id;
    		 	 }
	    	 }
		});
	});
  	
	$(document).ready(function(){
		$( "#search" ).click(function() {
			 jQuery("#grid1").saveRow(lastsel1);
        	 jQuery("#grid2").saveRow(lastsel2);
			 $.ajax({
					url : 'SYS1011M1.do',
					type : 'POST',
					data:'json',
					data :  {'type':$( "#type" ).val()
						,'name':$('#name').val()
							},
					success : function(data)
					{
						var rows=data.rows;
						dataSet1=new Array();
						$('#grid1').jqGrid('clearGridData');
						lastrow1=rows.length-1;
						
						if(data.result)
						{
							for(var i=0;i<rows.length;i++)
							{	
								if(i==0){
									$('#codeType').val(jQuery("#grid1").getRowData(0).codeType);
									$('#codeName').val(jQuery("#grid1").getRowData(0).codeName);
								}
								
								jQuery("#grid1").addRowData(i,rows[i]);
								jQuery('#grid1').setRowData(i, {sign:'R'});
									
								dataSet1[i]=rows[i];
							}
							codetype=jQuery("#grid1").getRowData(0).codeType;
							codename=jQuery("#grid1").getRowData(0).codeName;
						}else
						{
							alert(data.msg);
						}
							
					}
				});
			});
		});
	
	$(document).ready(function(){
		$("#codeType").click(function() {
			 jQuery("#grid1").saveRow(lastsel1);
        	 jQuery("#grid2").saveRow(lastsel2);
			 $.ajax({
					url : 'SYS1012M1.do',
					type : 'POST',
					data:'json',
					data :  {'codeType':$('#codeType').val()
						,'codeName':$('#codeName').val()
							},
					success : function(data)
					{
						var rows=data.rows;
						dataSet2=null;
						dataSet2=new Array();
						$('#grid2').jqGrid('clearGridData');
						lastrow2=rows.length-1;
						if(data.result)
						{
							for(var i=0;i<rows.length;i++)
							{
								jQuery("#grid2").addRowData(i,rows[i]);
								jQuery('#grid2').setRowData(i, {sign:'R'});
									
								dataSet2[i]=rows[i];
							}
						}else
						{
							alert(data.msg);
						}
							
					}
				});
		});
	});
	$(document).ready(function(){
		$("#codeName").click(function() {
			 jQuery("#grid1").saveRow(lastsel1);
        	 jQuery("#grid2").saveRow(lastsel2);
			 $.ajax({
					url : 'SYS1013M1.do',
					type : 'POST',
					data:'json',
					data :  {'codeType':$('#codeType').val()
						,'codeName':$('#codeName').val()
							},
					success : function(data)
					{
						var rows=data.rows;
						dataSet2=null;
						dataSet2=new Array();
						$('#grid2').jqGrid('clearGridData');
						lastrow2=rows.length-1;
						if(data.result)
						{
							for(var i=0;i<rows.length;i++)
							{
								jQuery("#grid2").addRowData(i,rows[i]);
								jQuery('#grid2').setRowData(i, {sign:'R'});
									
								dataSet2[i]=rows[i];
							}
						}else
						{
							alert(data.msg);
						}
							
					}
				});
		});
	});
	$(document).ready(function(){
		 $.ajax({
				url : 'SYS1011M1.do',
				type : 'POST',
				data:'json',
				data :  {'type':$( "#type" ).val()
					,'name':$('#name').val()
						},
				success : function(data)
				{
					var rows=data.rows;
					data1=rows;
					dataSet1=null;
					dataSet1=new Array();
					$('#grid1').jqGrid('clearGridData');
					lastrow1=rows.length-1;
					if(data.result)
					{
						for(var i=0;i<rows.length;i++)
						{	
							
							jQuery("#grid1").addRowData(i,rows[i]);
							jQuery('#grid1').setRowData(i, {sign:'R'});
								
							dataSet1[i]=rows[i];
						}
					}else
					{
						alert(data.msg);
					}
						
				}
			});
		});
	$(document).ready(function(){
		 $.ajax({
			url : 'SYS1012M1.do',
			type : 'POST',
			data:'json',
			data :  {'codeType':''
				,'codeName':''
					},
			success : function(data)
			{
				var rows=data.rows;
				dataSet2=null;
				dataSet2=new Array();
				$('#grid2').jqGrid('clearGridData');
				
				lastrow2=rows.length-1;
				
				if(data.result)
				{
					for(var i=0;i<rows.length;i++)
					{
						jQuery("#grid2").addRowData(i,rows[i]);
						jQuery('#grid2').setRowData(i, {sign:'R'});
							
						dataSet2[i]=rows[i];
					}
				}else
				{
					alert(data.msg);
				}
				 
			}
		});
	});
	
	$(document).ready(function(){
		$( "#insert1" ).click(function() {
			jQuery("#grid1").saveRow(lastsel1);
      	 	jQuery("#grid2").saveRow(lastsel2);
       	    jQuery('#grid1').resetSelection();
    	    jQuery('#grid2').resetSelection();
	 		var addrow = {codeType:''
	 					  ,codeDetail:''
	 					  ,codeName:''
	 					  ,sortOrder:0
	 					  ,sign:'I'} ;
	 	    jQuery("#grid1").addRowData(lastrow1+1,addrow,'first');
	 	   	jQuery("#grid1").jqGrid('setColProp','codeType',{editable:true});
	 	   	jQuery("#grid1").editRow(lastrow1+1, true);
	 	   	
	 	   lastrow1=lastrow1+1;
	 	   lastsel1=lastrow1;
		});
	});	
	$(document).ready(function(){
		$( "#insert2" ).click(function() {
        if($('#codeType').val()!=null && $('#codeType').val()!=''){
			 jQuery("#grid1").saveRow(lastsel1);
        	 jQuery("#grid2").saveRow(lastsel2);
        	 jQuery('#grid1').resetSelection();
        	 jQuery('#grid2').resetSelection();
	 		var addrow = {codeType:$('#codeType').val()
	 					  ,codeDetail:''
	 					  ,codeName:''
	 					  ,sortOrder:lastrow2+2
	 					  ,sign:'I'} ;
	 	    jQuery("#grid2").addRowData(lastrow2+1,addrow,'first');
	 	   	jQuery("#grid2").jqGrid('setColProp','codeDetail',{editable:true});
	 	   	jQuery("#grid2").editRow(lastrow2+1, true);
	 	   	
	 	   lastrow2=lastrow2+1;
	 	   lastsel2=lastrow2;
        } else {
        	alert("분류코드를 선택해 주세요");
        }	 
		});
	});	
        	 
	$(document).ready(function(){
		$( "#delete1" ).click(function() {
        	 jQuery("#grid2").saveRow(lastsel2);
			var row =  $( "#grid1" ).getGridParam( "selrow" );
			var data = $( "#grid1" ).getRowData(row);
			
			if(data.sign=='R'||data.sign=='D'||data.sign=='U'){
				jQuery('#grid1').setRowData(row, {sign:'D'});
				jQuery('#'+row,'#grid1').hide();
			} else {
		 		jQuery("#grid1").delRowData(row);
			}
			 jQuery("#grid1").saveRow(lastsel1);
		 	jQuery('#grid1').resetSelection();
		});
	});
	$(document).ready(function(){
		$( "#delete2" ).click(function() {
			 jQuery("#grid1").saveRow(lastsel1);
			var row =  $( "#grid2" ).getGridParam( "selrow" );
			var data = $( "#grid2" ).getRowData(row);
			
			if(data.sign=='R'||data.sign=='D'||data.sign=='U'){
				jQuery('#grid2').setRowData(row, {sign:'D'});
				jQuery('#'+row,'#grid2').hide();
			} else {
		 		jQuery("#grid2").delRowData(row);
			}
        	 jQuery("#grid2").saveRow(lastsel2);
		 	jQuery('#grid2').resetSelection();
		});
	});
	       	 
	$(document).ready(function(){
		$( "#cancel1" ).click(function() {
			 jQuery("#grid1").saveRow(lastsel1);
        	 jQuery("#grid2").saveRow(lastsel2);
			 $.ajax({
					url : 'SYS1011M1.do',
					type : 'POST',
					data:'json',
					data :  {'type':$( "#type" ).val()
						,'name':$('#name').val()
							},
					success : function(data)
					{
						var rows=data.rows;
						dataSet1=new Array();
						$('#grid1').jqGrid('clearGridData');
						lastrow1=rows.length-1;
						
						if(data.result)
						{
							for(var i=0;i<rows.length;i++)
							{
								jQuery("#grid1").addRowData(i,rows[i]);
								jQuery('#grid1').setRowData(i, {sign:'R'});
									
								dataSet1[i]=rows[i];
							}
						}else
						{
							alert(data.msg);
						}
							
					}
				});
		});
	});
  	 
	$(document).ready(function(){
		$( "#cancel2" ).click(function() {
			jQuery("#grid1").saveRow(lastsel1);
       	 jQuery("#grid2").saveRow(lastsel2);
			 $.ajax({
					url : 'SYS1012M1.do',
					type : 'POST',
					data:'json',
					data :  {'codeType':$('#codeType').val()
						,'codeName':$('#codeName').val()
							},
					success : function(data)
					{
						var rows=data.rows;
						dataSet2=null;
						dataSet2=new Array();
						$('#grid2').jqGrid('clearGridData');
						lastrow2=rows.length-1;
						if(data.result)
						{
							for(var i=0;i<rows.length;i++)
							{
								jQuery("#grid2").addRowData(i,rows[i]);
								jQuery('#grid2').setRowData(i, {sign:'R'});
									
								dataSet2[i]=rows[i];
							}
						}else
						{
							alert(data.msg);
						}
							
					}
				});
		});
	});
	
	$(document).ready(function(){
		$( "#save1" ).click(function() {
			jQuery("#grid1").saveRow(lastsel1);
			jQuery("#grid2").saveRow(lastsel2);
			
			var dataList = jQuery("#grid1").jqGrid("getRowData");
			var k=dataList.length-dataSet1.length;
			for(var i=k;i<dataList.length;i++)
			{
				if(dataSet1[i-k].sign==null&&dataList[i].sign=='R')
				{
					if(dataList[i].codeType==dataSet1[i-k].codeType 
							&&dataList[i].codeDetail==dataSet1[i-k].codeDetail
							&&dataList[i].codeName==dataSet1[i-k].codeName
							&&dataList[i].sortOrder==dataSet1[i-k].sortOrder){
						dataList[i].sign='R';
					}else if(dataList[i].codeType==dataSet1[i-k].codeType 
							&&dataList[i].codeDetail==dataSet1[i-k].codeDetail
							&&(dataList[i].codeName!=dataSet1[i-k].codeName
							||dataList[i].sortOrder!=dataSet1[i-k].sortOrder)){
						dataList[i].sign='U';
					}
				}
			}
			$.ajax({
				url : 'SYS1014M1.do',
				type : 'POST',
				dataType:'json',
				contentType: "application/json",
				data : JSON.stringify(dataList),
				success : function(data)
				{
					lastsel1='';
					jQuery('#grid2').resetSelection();
					alert(data.msg);
				
					$.ajax
					({
							url : 'SYS1011M1.do',
							type : 'POST',
							data:'json',
							data :  {'type':$( "#type" ).val()
								,'name':$('#name').val()
									},
							success : function(data)
							{
								var rows=data.rows;
								dataSet1=new Array();
								$('#grid1').jqGrid('clearGridData');
								lastrow1=rows.length-1;
								
								if(data.result)
								{
									for(var i=0;i<rows.length;i++)
									{
										jQuery("#grid1").addRowData(i,rows[i]);
										jQuery('#grid1').setRowData(i, {sign:'R'});
											
										dataSet1[i]=rows[i];
									}
								}else
								{
									alert(data.msg);
								}
									
							}
						});
				}
			});
		});
	}); 
	$(document).ready(function(){
		$( "#save2" ).click(function() {
			jQuery("#grid1").saveRow(lastsel1);
			jQuery("#grid2").saveRow(lastsel2);
			
			var dataList = jQuery("#grid2").jqGrid("getRowData");
			var k=dataList.length-dataSet2.length;
			for(var i=k;i<dataList.length;i++)
			{
				if(dataSet2[i-k].sign==null&&dataList[i].sign=='R')
				{
					if(dataList[i].codeType==dataSet2[i-k].codeType 
							&&dataList[i].codeDetail==dataSet2[i-k].codeDetail
							&&dataList[i].codeName==dataSet2[i-k].codeName
							&&dataList[i].sortOrder==dataSet2[i-k].sortOrder){
						dataList[i].sign='R';
					}else if(dataList[i].codeType==dataSet2[i-k].codeType 
							&&dataList[i].codeDetail==dataSet2[i-k].codeDetail
							&&(dataList[i].codeName!=dataSet2[i-k].codeName
							||dataList[i].sortOrder!=dataSet2[i-k].sortOrder)){
						dataList[i].sign='U';
						
					
					}
				}
			}
			$.ajax({
				url : 'SYS1015M1.do',
				type : 'POST',
				dataType:'json',
				contentType: "application/json",
				data : JSON.stringify(dataList),
				success : function(data)
				{
					lastsel1='';
					jQuery('#grid2').resetSelection();
					alert(data.msg);
				
				 	 jQuery("#grid2").saveRow(lastsel2);
					 $.ajax({
							url : 'SYS1012M1.do',
							type : 'POST',
							data:'json',
							data :  {'codeType':$('#codeType').val()
								,'codeName':$('#codeName').val()
									},
							success : function(data)
							{
								var rows=data.rows;
								dataSet2=null;
								dataSet2=new Array();
								$('#grid2').jqGrid('clearGridData');
								lastrow2=rows.length-1;
								if(data.result)
								{
									for(var i=0;i<rows.length;i++)
									{
										jQuery("#grid2").addRowData(i,rows[i]);
										jQuery('#grid2').setRowData(i, {sign:'R'});
											
										dataSet2[i]=rows[i];
									}
								}else
								{
									alert(data.msg);
								}
									
							}
						});
				}
			});
		});
	}); 

	</script>
  	
  	
  
</head>


<body>
	<form name="form01">
		<center>
			<table border="1" rules="none" cellspacing="0" cellpadding="5" width="70">
				<tr>
					<td> 검색조건
						<select id="type" >
							<option value="code">분류코드</option>
							<option value="name" selected="selected">분류코드명</option>
						</select> 
					
						<input id="name" type="text">
				
						<input id="search" type="button" value="조회">
					</td>
					<td align="right">	
						<input id="insert1" type="button" value="신규등록">
						
						<input id="delete1" type="button" value="삭제">
						
						<input id="cancel1" type="button" value="취소">
					
						<input id="save1" type="button" value="저장">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<table id="grid1"></table>
						<div id="pager1"></div>
					</td>
				</tr>

				<tr>
					<td>
						분류코드  :<input id="codeType" name="codeType" type="text" value="" readonly="readonly">
				
				   	         분류 코드 명 :<input id="codeName" type="text" value="" readonly="readonly">
					</td>
							
					<td align="right">	
					
						<input id="insert2" type="button" value="신규등록">
				
						<input id="delete2" type="button" value="삭제">
						
						<input id="cancel2" type="button" value="취소">
						
						<input id="save2" type="button" value="저장">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<table id="grid2"  >
						</table>
						<div id="pager2">
						</div>
					</td>
				</tr>
			</table>
		</center>
	</form>
</body>
</html>